<template>
	<view>
		<view style="display: flex;justify-content: center;align-items: center;" class="gui-margin-top">
			部门/公司：
			<picker mode="selector" :range="orgas" @change="orga_change" style="width: 300rpx;background-color: white;"
				class="gui-border gui-border-radius">
				<view class="gui-text-center">
					{{orgas[orga_index]}}
				</view>
			</picker>
		</view>
		<view style="" class="gui-padding">
			<view v-for="(d,i) in list" :class="'p'+d.rank"
				style="margin-bottom: 20rpx ;display: flex;justify-content: space-between;align-content: center;align-items:center">
				<view style="width: 100rpx;text-align: center;">
					<image v-if="d.rank<=3" :src="'/static/icon/p'+d.rank+'.png'" mode="aspectFit"
						style="width: 50rpx;height: 50rpx"></image>
					<text v-else>{{d.rank}}</text>

				</view>
				<view style="flex: 1;display: flex;">

					<image :src="d.img" mode="aspectFill"
						style="width: 80rpx;height: 80rpx;border-radius: 50%;margin-right: 20rpx;"></image>
					<view>
						<view style="font-size: 30rpx;font-weight: 500">
							{{d.realName}}
						</view>
						<view class="gui-text-small gui-color-gray">
							{{d.comName}}
						</view>
					</view>
				</view>
				<view style="width: 150rpx;font-weight: bold;">
					{{d.score}}
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				realName: null,
				throghtId: null,
				cateId: null,
				page_index: 1,
				list: [],
				orgas: ['全部'],
				orga_index: 0,
				orgaData: []
			}
		},
		onLoad() {
			this.get_orgas();
			this.get_data()
		},
		methods: {
			orga_change(e) {
				console.log(e);
				this.orga_index = e.detail.value;
				this.cateId = this.orgaData[this.orga_index - 1].id;
				this.list = [];
				this.get_data();
			},
			get_orgas() {
				let self = this;
				this.$lg.Get("/API-RUSH/front/rushQuery/query", {
					isCom: 1
				}, function(res) {
					console.log('闯关排行下拉框res: ', res);
					res.data.map((d) => {
						self.orgas.push(d.name);
					});
					self.orgaData = res.data;
				}, err => {
					console.log('闯关排行下拉框err: ', err);
				}, false, false)
			},
			get_data() {
				let url = "/API-RUSH/rushRank/personalRank"
				let parm = {
					page: this.page_index,
					pageSize: 20,
					cateId: this.cateId,
					throghtId: this.throghtId,
					realName: this.realName
				}
				let self = this;
				this.$lg.Get(url, parm, function(res) {
					console.log('闯关排行res: ', res);
					self.list = res.data.result.rows;
					self.list.map((d) => {
						if (d.hasOwnProperty("headPortrait")) {
							let j = JSON.parse(d.headPortrait);
							d.img = self.$uimg + j.id;
						} else {
							d.img = "/static/icon_tx.png"
						}
					})
				}, err => {
					console.log('闯关排行err: ', err);
				}, false, false)
			}
		}
	}
</script>

<style>
	page {
		width: 100vw;
		height: 100vh;
		background: url("https://boyaltd.oss-cn-hangzhou.aliyuncs.com/bj_liand.png") 100% 100% / 100% 100%;
		/* background-repeat:no-repeat; */
	}

	.p1 {
		background: #ffefb4;
		border-radius: 16rpx;
	}

	.p2 {
		background: #f1f6ff;
		border-radius: 16rpx;
	}

	.p3 {
		background-color: #ffeedf;
		border-radius: 16rpx;
	}
</style>